<template>
	<view class="container" v-if="userInfo.user_id">
		<u-navbar title-color="#fff" back-icon-color="#fff" :border-bottom="false" style="position: fixed;z-index: 20;" :background="navbarBackground" title="充值" :is-fixed="true"></u-navbar>
		<view class="account-panel">
			<image class="account-panel-background" :src="`${staticFileDomain}/static/image/image-recharge-head.png`" mode="aspectFill"></image>
			<view class="panel-lable">账户余额</view>
			<view class="panel-balance">
				<text>{{ userInfo.balance }}</text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: scrollViewHeight + 'px' }">
			<view class="recharge-scroll" style="overflow: hidden;">
				<view class="recharge-divider"></view>
				<view class="recharge-panel">
					<!-- <view class="recharge-label"><text>充值金额</text></view> -->
					<view class="recharge-plan-list">
						<block v-for="(item, index) in planList" :key="index">
							<view class="recharge-plan-item " :class="{ active: selectedPlanId == item.plan_id }" @tap="onSelectPlan" :data-id="item.plan_id">
								<view class="recharge-plan-money">
									<text>{{ item.money }}</text>
								</view>
								<view class="recharge-plan-gift" v-if="item.gift_money > 0">
									<text>{{ item.gift_money }}</text>
								</view>
							</view>
						</block>
					</view>
					<!-- 手动充值输入框 -->
					<view><input placeholder-class="recharge-input-placeholder" class="recharge-input" v-if="setting.is_custom == '1'" @input="bindMoneyInput" type="digit" placeholder="请输入充值金额" v-model="inputValue" /></view>
				</view>
				<!-- 充值描述 -->
				<view class="recharge-describe">
					<view class="recharge-describe-label">充值说明</view>
					<view class="recharge-describe-content">
						<text space="ensp">{{ setting.describe }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 确认按钮 -->
		<view class="recharge-submit">
			<view class="recharge-btn" @tap.stop="showPaymentPopup">立即充值</view>
			<!-- <view class="recharge-submit-btn">
				<form @submit="onSubmit" report-submit="true"><button formType="submit" :disabled="disabled">立即充值</button></form>
			</view> -->
		</view>
		<payment-popup source="recharge" v-if="showPayPopup" @close="onTogglePayPopup" @confirm="recharge"></payment-popup>
	</view>
</template>

<script>
import { HTML_DOMAIN } from '@/constant/Config.js';
import PayTypeEnum from '@/utils/enum/order/PayType';
import popup from '@/components/popup/index.vue';
import Payment from '@/utils/Payment.js';
import Tools from '@/utils/Tools.js';
import paymentPopup from '@/components/custom/payment-popup.vue';
export default {
	components: { popup, paymentPopup },
	data() {
		return {
			setting: {}, // 充值设置

			// recharge_type: '', // 充值类型
			selectedPlanId: 0, // 当前选中的套餐id
			inputValue: '', // 自定义金额
			PayTypeEnum,
			disabled: false, //按钮禁用
			planList: [],
			showPayPopup: false,
			authId: null,

			navbarBackground: {
				background: 'rgba(255,255,255,0)'
			},
			scrollViewHeight: null
		};
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.authId = uni.getStorageSync('authId') || null;
		this.scrollViewHeight = systemInfo.windowHeight - uni.upx2px(280) - 44 - systemInfo.statusBarHeight - uni.upx2px(132) - Tools.getSafeAreaBottomHeight();
	},
	onShow() {
		this.getRechargeIndex();
	},
	methods: {
		/**
		 * 获取充值中心数据
		 */
		getRechargeIndex() {
			this.$u.api.getRechargeCenter().then(res => {
				this.planList = res.data.planList;
				this.setting = res.data.setting;
			});
		},
		/**
		 * 选择充值套餐
		 */
		onSelectPlan(e) {
			this.selectedPlanId = e.currentTarget.dataset.id;
			this.inputValue = '';
		},
		/**
		 * 绑定金额输入框
		 */
		bindMoneyInput(e) {
			this.selectedPlanId = 0;
		},
		/**
		 * 立即充值
		 */
		onSubmit(e) {
			this.onTogglePayPopup();
			return false;
		},
		onSelectPayType(e) {
			this.recharge(e.currentTarget.dataset.value);
			this.onTogglePayPopup();
		},
		showPaymentPopup() {
			if ((this.inputValue || this.selectedPlanId > 0) && !this.disabled) {
				this.onTogglePayPopup();
			}
		},
		/**
		 * 充值
		 */
		recharge(data) {
			this.onTogglePayPopup();
			const pay_type = data.pay_type;
			// 按钮禁用
			this.disabled = true;
			// 提交到后端
			this.$u.api
				.doRecharge(this.selectedPlanId, this.inputValue, pay_type, HTML_DOMAIN + '/payeUser/wallet/index')
				.then(res => {
					Payment.pay(
						res.data.payment,
						pay_type,
						() => {
							this.disabled = false;
							this.redirectToUserIndex();
						},
						msg => {
							this.$u.toast(msg.errMsg);
							this.disabled = false;
						}
					);
				})
				.catch(e => {
					this.disabled = false;
				});
		},
		/**
		 * 显示/隐藏支付方式弹窗
		 */
		onTogglePayPopup() {
			this.showPayPopup = !this.showPayPopup;
		},
		/**
		 * 跳到个人中心
		 */
		redirectToUserIndex() {
			this.navigateTo({ url: '/pageUser/wallet/index' });
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	background: #fff;
}
.account-panel {
	height: calc(280rpx + var(--status-bar-height) + 44px);
	padding-top: calc(var(--status-bar-height) + 44px);
	box-sizing: border-box;
	width: 750rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	.account-panel-background {
		position: absolute;
		width: 750rpx;
		height: 508rpx;
		bottom: 0;
	}
	.panel-lable {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 40rpx;
		z-index: 20;
		margin-top: 93rpx;
	}
	.panel-balance {
		margin-top: 10rpx;
		height: 90rpx;
		font-size: 64rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 20;
		overflow: hidden;
		text {
			line-height: 60rpx;
			padding-left: 8rpx;
		}
		&::before {
			content: '¥';
			font-size: 38rpx;
		}
	}
	/* width: 650rpx;
	height: 180rpx;
	margin: 50rpx auto;
	padding: 0 60rpx;
	box-sizing: border-box;
	border-radius: 12rpx;
	color: #fff;
	background: linear-gradient(-125deg, #a46bff, #786cff);
	box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26); */
}
.recharge-scroll {
	overflow: hidden;
	.recharge-divider {
		height: 17rpx;
		background: rgba(248, 248, 248, 1);
	}
	.recharge-panel {
		padding: 53rpx 40rpx 0;
		.recharge-plan-list {
			display: flex;
			flex-wrap: wrap;
			.recharge-plan-item {
				width: 214rpx;
				height: 149rpx;
				border-radius: 20rpx;
				border: 2rpx solid rgba(248, 89, 98, 1);
				margin-right: 14rpx;
				color: #f85962;
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				margin-bottom: 17rpx;
				box-sizing: border-box;
				&:nth-child(n + 3) {
					margin-right: 0;
				}
				&.active {
					background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
					color: #fff;
				}
				.recharge-plan-money {
					color: inherit;
					margin-top: 22rpx;
					height: 56rpx;
					font-size: 48rpx;
					font-weight: 500;
					display: flex;
					align-items: flex-end;
					text {
						line-height: 1;
					}
					&::before {
						content: '¥';
						font-size: 26rpx;
						margin-right: 4rpx;
					}
				}
				.recharge-plan-gift {
					margin-top: 5rpx;
					height: 35rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					&::before {
						content: '赠送¥';
						font-size: 20rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
	.recharge-input {
		margin-top: 38rpx;
		height: 80rpx;
		border-radius: 38rpx;
		border: 2rpx solid rgba(248, 89, 98, 1);
		text-align: center;
		font-size: 36rpx;
		font-weight: 400;
		color: #f85962;
	}
	.recharge-input-placeholder {
		color: #feaea7;
		font-size: 28rpx;
	}
}

.recharge-submit {
	height: calc(132rpx + var(--safe-area-inset-bottom));
	padding: 26rpx 40rpx calc(var(--safe-area-inset-bottom) + 26rpx) 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 立即充值 */
// .recharge-submit {
// 	margin-top: 70rpx;
// }
.btn-submit button {
	font-size: 30rpx;
	background: #786cff;
	border: none;
	color: white;
	border-radius: 50rpx;
	padding: 0 120rpx;
	line-height: 3;
}
.btn-submit button[disabled] {
	background: #a098ff;
	border-color: #a098ff;
	color: white;
} /* 充值说明 */
.recharge-describe {
	margin-top: 54rpx;
	padding: 0 40rpx;
	.recharge-describe-label {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(248, 89, 98, 1);
		line-height: 40rpx;
	}
	.recharge-describe-content {
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
		margin-top: 10rpx;
	}
}
.recharge-btn {
	height: 80rpx;
	background: linear-gradient(rgb(237, 79, 93) 0%, rgb(251, 122, 142) 100%);
	border-radius: 40rpx;
	width: 670rpx;
	color: rgb(255, 255, 255);
	font-size: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 弹出层：支付方式 */

.pop-orderPay .pop-title {
	text-align: left;
}

.pay-method .pay-item {
	padding: 20rpx 0;
	font-size: 28rpx;
	/* border-bottom: 1rpx solid rgb(248, 248, 248); */
}

.pay-method .pay-item .item-left_icon {
	margin-right: 20rpx;
	font-size: 32rpx;
}

.pay-method .pay-item .item-left_icon.wechat {
	color: #00c800;
}

.pay-method .pay-item .item-left_icon.balance {
	color: #ff9700;
}
.pay-method .pay-item .item-left_icon.alipay {
	color: #0093e2;
}
.pop-example__container {
	background: #fff;
	padding: 30rpx 40rpx;
	border-radius: 10rpx;
	min-width: 460rpx;
}

.pop-example__container .pop-title {
	text-align: center;
}

.pop-content {
	margin-top: 30rpx;
}
</style>
